<!-- 交接班记录 -->
<template>
    <div>
        <div class="page has-navbar changeWork" v-if="$route.name==='changeWork'">
            <div class="page-content">
                <div class="listTitle clearfix">
                    <div style="width:20%" class="left">交班员工</div>
                    <div style="width:25%" class="left">总收入</div>
                    <div style="width:25%" class="left">退单</div>
                    <div style="width:30%;padding-right:.5rem;" class="left">交班时间</div>
                    <!-- <div style="width:5%" class="left"></div> -->
                </div>
                <scroll class="changeWorkList" :on-infinite="onInfinite">
                    <item v-for="(item, index) in changeWorkList" :key="index" @click.native="onItemClick(item)" class="workItem" :class="{'item-stable': index % 2 == 0}">
                        <div style="width:20%" class="left" v-text="item.closeUsername"></div>
                        <div style="width:25%" class="left" v-text="'￥'+item.turnInAmount"></div>
                        <div style="width:25%" class="left" v-text="'￥'+(item.refundAmount)"></div>
                        <div style="width:30%" class="left spec1">
                            <div v-text="numberToMonthDate(item.beginTime)"></div>
                            <div v-text="numberToMonthDate(item.endTime)"></div>
                            <i class="iconfont icon-jiantou2"></i>
                        </div>
                    </item>

                    <div v-if="!haveMore" slot="infinite" class="text-center">没有更多数据</div>
                </scroll>
            </div>
        </div>
        <router-view v-if="$route.name==='workDetail'"></router-view>
    </div>
</template>
<script>
export default {
  props: ["storeId"],
  data() {
    return {
      changeWorkList: [],
      haveMore: true,
      pageSize: 15,
      curPage: 0,
    };
  },
  methods: {
    // 显示模态框
    showModal() {
      this.modal.show();
    },
    onInfinite(done) {
      this.curPage++;
      this.$http
        .get(
          "/workshift/list?storeId=" +
            this.storeId +
            "&page=" +
            this.curPage +
            "&pageSize=" +
            this.pageSize
        )
        .then(res => {
          if (!res.data.workShifts[0]) {
            this.haveMore = false;
            this.curPage--;
            done();
            return;
          }
          this.changeWorkList = this.changeWorkList.concat(res.data.workShifts);
          done();
        })
        .catch(() => {});
    },

    numberToMonthDate: function(val) {
      let date = new Date(val);
      let dateStr =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        "." +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
        "-" +
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
        ":" +
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
      return dateStr;
    },

    onItemClick(item) {
      this.$router.push({
        path: "/index/changeWork/workDetail",
        query: {
          workShiftId: item.id,
          name: item.closeUsername,
          beginTime: item.beginTime,
          endTime: item.endTime
        }
      });
    }
  },
  created() {
    document.title = "交接班记录";
    this.$http
      .get(
        "/workshift/list?storeId=" +
          this.storeId +
          "&page=" +
          this.curPage +
          "&pageSize=" +
          this.pageSize
      )
      .then(res => {
        this.changeWorkList = res.data.workShifts;
        if (res.data.workShifts.length < this.pageSize) {
          this.haveMore = false;
        }
      })
      .catch(() => {});
  }
};
</script>
<style lang="scss" scoped>
@import "changeWork";
</style>
